<template>
  <div class="right-panel">
    <div class="firstTitle">
      <div class="topTitle" @click="">当前流程</div>
    </div>
    <el-divider />
    <!-- 合并后的表单 -->
    <el-form
      ref="ruleFormRef"
      label-width="120px"
      :model="applicationForm"
      :rules="userInfoRules"
      :size="formSize"
      status-icon
      label-position="top"
      style="margin-top: 20px; margin-left: 10px"
    >
      <!-- HR 流程确认 -->
      <div class="section">
        <!-- <div class="section-title">
          <span>HR流程确认</span>
        </div> -->
        <icon-text :icon-name="Warning" text="HR流程确认" />

        <el-form-item label="HR：" required prop="hrId">
          <el-select
            v-model="applicationForm.hrId"
            clearable
            placeholder="请选择HR"
            style="width: 100%"
            @change="hrNameChange"
          >
            <el-option
              v-for="item in hrNameOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系时间：" prop="contactTime">
          <el-date-picker
            v-model="applicationForm.contactTime"
            type="date"
            placeholder="年/月/日"
            clearable
          />
        </el-form-item>
        <el-form-item label="联系方式：" prop="contactInformation">
          <el-select
            v-model="applicationForm.contactInformation"
            clearable
            placeholder="联系方式"
          >
            <el-option
              v-for="item in sys_contact_information"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="后续流程：" prop="followUp">
          <el-select
            v-model="applicationForm.followUp"
            placeholder="后续流程"
            clearable
          >
            <el-option
              v-for="item in sys_follow_up"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="沟通记录的内容：" prop="content">
          <el-input
            v-model="applicationForm.content"
            type="textarea"
            placeholder="请输入"
            :rows="4"
            maxlength="500"
            show-word-limit
            clearable
            :autosize="{ minRows: 3, maxRows: 6 }"
          />
        </el-form-item>
      </div>

      <!-- 面试预约 -->
      <div class="section">
        <div class="section-title">
          <span>面试预约</span>
        </div>
        <el-form-item label="预约面试时间" prop="appointmentTime">
          <el-date-picker
            style="width: 100%"
            v-model="applicationForm.appointmentTime"
            type="date"
            placeholder="年/月/日"
            clearable
          />
        </el-form-item>
        <el-form-item label="面试官" prop="interviewerId">
          <el-select
            v-model="applicationForm.interviewerId"
            placeholder="添加面试官"
            clearable
          >
            <el-option
              v-for="item in requireProposerOptions"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="面试方式" prop="interviewMethod">
          <el-select
            v-model="applicationForm.interviewMethod"
            placeholder="面试方式"
            clearable
          >
            <el-option
              v-for="item in sys_interview_method"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="面试类型" prop="interviewType">
          <el-select
            v-model="applicationForm.interviewType"
            placeholder="面试类型"
            clearable
          >
            <el-option
              v-for="item in sys_interview_type"
              :key="item.value"
              :label="item.label"
              :value="Number(item.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="面试地址/视频会议地址" prop="address">
          <el-input
            v-model="applicationForm.address"
            placeholder="面试地址/视频会议地址"
            type="textarea"
            maxlength="100"
            show-word-limit
            :autosize="{ minRows: 3, maxRows: 6 }"
          />
        </el-form-item>
      </div>
    </el-form>
    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button @click="cancel">取消</el-button>
      <!-- <el-button @click="save">保存</el-button> -->
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from "vue";
import IconText from "@/components/IconText.vue";
const props = defineProps({
  applicationForm: {
    type: Object,
    required: true,
  },
  userInfoRules: {
    type: Object,
    required: true,
  },
  formSize: {
    type: String,
    default: "default",
  },
  hrNameOptions: {
    type: Array,
    required: true,
  },
  sys_contact_information: {
    type: Array,
    required: true,
  },
  sys_follow_up: {
    type: Array,
    required: true,
  },
  requireProposerOptions: {
    type: Array,
    required: true,
  },
  sys_interview_method: {
    type: Array,
    required: true,
  },
  sys_interview_type: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(["cancel", "save", "submit"]);

const ruleFormRef = ref(null);

const cancel = () => {
  emit("cancel");
};
const handleSubmit = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      emit("submit");
    } else {
      console.log("表单验证失败");
      return false;
    }
  });
};

const hrNameChange = (value) => {
  console.log("HR名称变更:", value);
};
</script>

<style scoped>
.right-panel {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  /* padding: 16px; */
}

.section {
  margin-bottom: 20px;
}
.action-buttons {
  margin-top: 20px;
  text-align: right;
}

.section {
  margin-bottom: 30px;
}
.form-item {
  display: flex;
  margin-bottom: 15px;
}

.el-form-item {
  margin-bottom: 15px;
}

:deep(.el-form-item--label-top .el-form-item__label) {
  font-size: 13px !important;
  color: #16191d;
}
.topTitle {
  color: #161c1d;
  font-family: "Source Han Sans CN";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
</style>
